<template>
    <div class="demo-pagination-block">
        <div class="demonstration">All combined</div>
        <el-pagination 
            v-model:current-page="currentPage" 
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]" 
            :small="small" 
            :disabled="disabled" 
            :background="background"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const currentPage = ref(4)
    const pageSize = ref(100)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
    .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
    margin-bottom: 16px;
    }
</style>